<template>
	<div id="app">
		<!-- 容器 -->
		<el-container>
			<!-- 头部-->
			<el-header class="el-header-top">
				<el-row type="flex" justify="space-between">
					<el-col :span="4">
						<div class="bg-purple-left">
							<router-link :to="{path:'/smbms',query:{titleName:'首页'}}">
								<img src="./assets/img/buy.png" />
								<h2 class="cs-h2">超市订单管理系统</h2>
							</router-link>
						</div>
					</el-col>

					<el-col :span="8">
						<div class="bg-purple-right">
							<img src="./assets/img/time.png" />
							<span class="date" id="timeDate">2021年10月7日 1:54:00 星期四</span>
							<span class="span-01" style="font-weight: bolder;">上午好！</span>
							<a href="" style="color: yellow;"></a>
							<span class="span-01" style="font-weight: bolder;">，欢迎您！</span>
							<el-button type="success" style="font-weight: bold;">退出</el-button>
						</div>
					</el-col>
				</el-row>
			</el-header>

			<!-- 身体部分 -->
			<el-container>
				<!-- 侧边栏 -->
				<el-aside width="201px">
					<el-menu default-active="0" background-color="#2F4050" text-color="#fff"
						active-text-color="#ffd04b">
						<div class="gn">
							<i class="el-icon-s-operation" style="color: white;font-size: 26px;"></i>
						</div>
						<el-submenu index="1">
							<template slot="title">
								<img src="./assets/img/zd.png" />
								<span>订单管理</span>
							</template>
							<el-menu-item index="1-1">
								<i class="el-icon-caret-right"></i>
								<router-link :to="{path:'/smbms/bill/list',query:{titleName:'订单列表'}}">订单列表</router-link>
							</el-menu-item>
						</el-submenu>

						<el-submenu index="2">
							<template slot="title">
								<img src="./assets/img/gys.png" />
								<span>供应商管理</span>
							</template>
							<el-menu-item index="2-1">
								<i class="el-icon-caret-right"></i>
								<router-link to="/smbms/provider/list">供应商列表</router-link>
							</el-menu-item>
						</el-submenu>

						<el-submenu index="3">
							<template slot="title">
								<img src="./assets/img/yh.png" />
								<span>用户管理</span>
							</template>
							<el-menu-item index="3-1">
								<i class="el-icon-caret-right"></i>
								用户列表
							</el-menu-item>
						</el-submenu>

						<el-submenu index="4">
							<template slot="title">
								<img src="./assets/img/pwd.png" />
								<span>密码管理</span>
							</template>
							<el-menu-item index="4-1">
								<i class="el-icon-caret-right"></i>
								密码修改
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>

				<!-- 内容展示区 -->
				<el-container>
					<el-main>
						<!-- 要展示的内容 -->
						<router-view></router-view>
					</el-main>	
				</el-container>
			</el-container>
			
			<!-- 尾部  -->
			<el-footer>Footer</el-footer>
		</el-container>
	</div>
</template>

<script>
	import Main from './components/main.vue'
	export default {
		name: 'App',
		components: {
			Main
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url("assets/css/public.css");
	.el-button--danger{
		margin-left: 0px !important;
	}
</style>
